<template>
	<view class="Mswiper">
		<!-- <tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></tabs> -->
		<appTabs id="tab-bar" v-model="tabIndex" :tabs="tabs" :fixed="true" style="z-index: 1;"></appTabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescrollSwiperItem :i="i" :index="tabIndex" :tabs="tabs"></mescrollSwiperItem>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import tabs from '@/components/me-tabs/me-tabs.vue'
	import appTabs from '@/components/app-tab/app-tabs.vue'
	import mescrollSwiperItem from './mescrollSwiper-item.vue'
	export default{
		components:{
			appTabs,
			tabs,
			mescrollSwiperItem
		},
		data(){
			return{
				height: "400px", // 需要固定swiper的高度
				tabs: [{name:'小姐姐'}, {name:'小仙女'}, {name:'小富婆'}, {name:'小萝莉'}],
				tabIndex: 0 // 当前tab的下标
			}
		},	
		onLoad() {
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
		},
		methods: {
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			}
		},
	}
</script>

<style>
	page{
		background: #F5F5F5;
	}
	
</style>
